<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%- include("./component/header.html"); %>
    <style>
        .main {
            width: 70vw !important;
            max-width: initial !important;
        }

        #result-table {
            width: 100%;
            /* border: 1px solid black; */
            margin-top: 30px;
            line-height: 2.3em;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        tr > th:last-child,
        tr > td:last-child {
            border-left: 2px dashed;
        }
        tr > th {
            border-bottom: 2px dotted;
        }

        tr a {
            cursor: pointer;
            /* cursor: alias; */
        }

        @media (max-width: 700px) {
            tr > th:last-child,
            tr > td:last-child {
                display: none;
            }
        }
    </style>
</head>
<body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1><%= headText %></h1>
        <div id="container">
            <table id="result-table"></table>
        </div>
    </main>
    <%- include("./component/footer.html"); %>

    <!-- 渲染表格 -->
    <script src="/assets/javascripts/renderTable.js"></script>
    <!-- 生成分类层级关系 -->
    <script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
    <script>
        getRequest("/category/list")
            .then(function (responseData) {
                var axiosData = responseData.data;
                var status = axiosData.status;
                var data = axiosData.data;
                if (status === "success") {
                    // console.log("获取的分类信息");
                    console.log(data)

                    var renderData = [];

                    // 按照列表渲染
                    // data.forEach(element => {
                    //     var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                    //     var columnWidth = [60, 40];
                    //     renderData.push({
                    //         分类: `<a target="_blank" href="/category?id=${element.id}">
                    //                     <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                    //                         ${element.name}
                    //                     </span>
                    //                 </a>`,
                    //         简介: `<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
                    //                     ${element.description}
                    //                 </span>`,
                    //     })
                    // });

                    // 按照层级关系进行渲染
                    // console.log("按照层级关系排列好之后");
                    hierarchyData = generateCategoryHierarchy(data);
                    function render(category) {
                        function renderCategory(category, renderData) {
                            var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
                            var columnWidth = [70, 30];
                            renderData.push({
                                分类: `<a target="_blank" href="/category?id=${category.id}">
                                            <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; text-align: left;">
                                                ${"&nbsp;".repeat((category.level-1)*8)}${category.name}
                                            </span>
                                        </a>`,
                                简介: `<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; text-align: left; text-indent: 1em;">
                                            ${category.description}
                                        </span>`,
                            })
                        }
                        renderCategory(category, renderData);
                        // console.log("category", category)
                        for (let i = 0; i < category.children.length; i++)
                            render(category.children[i]);
                    }
                    render({ children: hierarchyData });
                    renderData.shift(); // 删除数组中的第一个元素

                    if(renderData.length == 0) {
                        renderTable({ data: `系统中暂时还没有书籍分类`, tableId: "result-table", renderTableHead: true });
                    } else {
                        renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
                    }
                } else {
                    swal(`出错啦！${data.errMsg} (错误码: ${data.errCode})`);
                }
            }).catch(function (error) {
                console.log(error);
                swal("无法连接到服务器，请检查网络连接！");
            }).finally(function () {
            // 渲染后重新获取一次字体
            if (typeof (fontmin) === "function") {
                fontmin(getPageText());
            }
        });
    </script>
</body>
</html>